import React, {Component} from 'react'
import Header from '@/components/header/header'
import Footer from '@/components/footer/footer'
import monent from 'moment'
import Dota2 from '../../assets/images/Dota.jpg'
import Lol from '../../assets/images/Lol.jpg'
import douyu from '../../assets/images/douyu.jpg'
import eleme from '../../assets/images/eleme.jpg'
import Meituan from '../../assets/images/Meituan.jpg'
import './weekend.scss'

class Weekend extends Component {

    constructor(props) {
        super(props);
        this.state = {
            day: 0,
            hour: 0,
            minute: 0,
            second: 0,
            day2: 0,
            hour2: 0,
            minute2: 0,
            second2: 0
        }
    }

    componentDidMount() {
        let m = monent()
        const guoqing = m.weekday(1).hour(17).minute(30).second(0).unix();//不填详细小时分秒是按现在算的
        const timeFriday = m.weekday(5).hour(17).minute(30).second(0).unix();//不填详细小时分秒是按现在算的
        this.countFun(timeFriday * 1000);
        this.countFun2(guoqing * 1000);
    }

    //组件卸载取消倒计时
    componentWillUnmount() {
        clearInterval(this.timer);
    }


    countFun2 = (time) => {
        let end_time = time,
            sys_second = (end_time - new Date().getTime());
        console.log(end_time);
        console.log(sys_second);
        this.timer = setInterval(() => {
            //防止倒计时出现负数
            if (sys_second > 1000) {
                sys_second -= 1000;
                let day = Math.floor((sys_second / 1000 / 3600) / 24);
                let hour = Math.floor((sys_second / 1000 / 3600) % 24);
                let minute = Math.floor((sys_second / 1000 / 60) % 60);
                let second = Math.floor(sys_second / 1000 % 60);
                this.setState({
                    day2: day,
                    hour2: hour < 10 ? "0" + hour : hour,
                    minute2: minute < 10 ? "0" + minute : minute,
                    second2: second < 10 ? "0" + second : second
                })
            } else {
                clearInterval(this.timer);
                //倒计时结束时触发父组件的方法
                //this.props.timeEnd();
            }
        }, 1000);
    }


    countFun = (time) => {
        let end_time = time,
            sys_second = (end_time - new Date().getTime());
        console.log(end_time);
        console.log(sys_second);
        this.timer = setInterval(() => {
            //防止倒计时出现负数
            if (sys_second > 1000) {
                sys_second -= 1000;
                let day = Math.floor((sys_second / 1000 / 3600) / 24);
                let hour = Math.floor((sys_second / 1000 / 3600) % 24);
                let minute = Math.floor((sys_second / 1000 / 60) % 60);
                let second = Math.floor(sys_second / 1000 % 60);
                this.setState({
                    day: day,
                    hour: hour < 10 ? "0" + hour : hour,
                    minute: minute < 10 ? "0" + minute : minute,
                    second: second < 10 ? "0" + second : second
                })
            } else {
                clearInterval(this.timer);
                //倒计时结束时触发父组件的方法
                //this.props.timeEnd();
            }
        }, 1000);
    }



    goBack = () => {
        this.props.history.push('/')
    }

    render() {
        return (
            <div>
                <Header title='划水怪与摸鱼侠' goBack={this.goBack}/>
                <div className="mt_50">
                    <div className="flex">
                        <img className="image_c1" src={Dota2} alt=""/>
                        <img className="image_c2" src={Lol} alt=""/>
                    </div>

                    <h1 className="flex">周末倒计时 👇</h1>
                    <span
                        className="color-red flex">{this.state.day}天 {this.state.hour}:{this.state.minute}:{this.state.second}</span>

                    <h1 className="flex">倒计国庆时 👇</h1>
                    <span
                        className="color-red flex">{this.state.day2}天 {this.state.hour2}:{this.state.minute2}:{this.state.second2}</span>

                    <div className="flex">
                        <img className="image_c1" src={douyu} alt=""/>
                        <img className="image_c2" src={eleme} alt=""/>
                    </div>
                    <div>
                        <img className="image_c3" src={Meituan} alt=""/>
                    </div>
                </div>
                <Footer/>
            </div>
        );
    }
}

export default Weekend
